<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-05-22 17:48:30
-->
<template>
  <div class="swiper-virtual prizeSwipe">
    <div class="swiper-wrapper"></div>
  </div>
</template>
<script setup lang="ts" name="prizeSwipe">
import { onMounted, onUnmounted } from "vue";
import { loadScript } from "@/utils";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
  }>(),
  {
    centerindex: 0,
  }
);

const emit = defineEmits(["initDone", "update:centerindex", "change"]);
const { t } = useI18n();
let swiper: any = null;
const isScriptDone = ref(false);
const isOnMounted = ref(false);
const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";
const source = reactive({
  curPrize: 4997,
  prizeIcons: [
    `${prefixImg}/image/lottery/prize10.png`,
    `${prefixImg}/image/lottery/prize30.png`,
    `${prefixImg}/image/lottery/prize50.png`,
    `${prefixImg}/image/lottery/prize1.png`,
    `${prefixImg}/image/lottery/prize5.png`,
  ],
});

/**
 * @description: 手动加在script脚本,失败会重试 3 次
 */
loadScript("/file/swiper-bundle.min.js", () => {
  isScriptDone.value = true;
});

// 初始化Swiper
const initSwiper = () => {
  swiper = new Swiper(".prizeSwipe", {
    slidesPerView: 1,
    initialSlide: 997,
    spaceBetween: 0,
    touchRatio: 0.36,
    virtual: {
      slides: (function () {
        const slides = [];
        for (var i = 0; i < 2000; i += 1) {
          slides.push(i + 1);
        }
        return slides;
      })(),
      renderSlide: function (slide, index) {
        return ` <div class="swiper-slide prize-swipe-item items-center">
                <img
                  class="prize-swipe-item-icon ${
                    false ? "prize-swipe-item-start" : ""
                  }"
                  src="${source.prizeIcons[index % 5]}"
                />
              </div>`;
      },
    },
    on: {
      // Swiper Change 事件
      slideChange: function () {
        // console.log("prize 改变了，activeIndex为" + this.activeIndex);
        // 通知
        emit("change", this.activeIndex);
      },
      // 加载完成通知
      init: function (val: any) {
        emit("initDone", val);
      },
    },
  });
  // console.log("--奖品", swiper);
};

watch([isOnMounted, isScriptDone], (neweVal) => {
  if (neweVal[0] && neweVal[1] && !swiper) initSwiper();
});
onMounted(() => {
  isOnMounted.value = true;
});
onUnmounted(() => {
  if (swiper) swiper.destroy(); // 移除
});
</script>
<style lang="scss">
@import url("./swiper-bundle.min.css");
.prizeSwipe {
  .prize-slide {
    position: relative;
  }
  .prize {
    &-swipe {
      &-item {
        transform: scale(1) !important;
        width: 100% !important;
        height: 130 * 2px !important;
        justify-content: center !important;
        display: flex !important;

        &-icon {
          width: 130 * 2px;
          height: 130 * 2px;
        }
        &-start {
          @keyframes shakeimg {
            0% {
              transform: rotateZ(0deg);
            }
            25% {
              transform: rotateZ(15deg);
            }
            50% {
              transform: rotateZ(-15deg);
            }
            75% {
              transform: rotateZ(15deg);
            }
            100% {
              transform: rotateZ(0deg);
            }
          }
          animation: shakeimg 0.4s ease-in-out 4;
        }
      }
    }
  }
}
</style>
